<template>
  <div class="p-header">
    <div class="title">{{ title }}</div>
    <div class="fixed-right" v-if="false">
      <div class="time-box">
        <span>{{ time }}</span>
        <span class="date">{{ date }}</span>
      </div>
      <img
        class="clude"
        src="@/assets/images/park/d-header/clude@2x.png"
        alt=""
        srcset=""
      />
      <span class="temp"> 20℃ </span>
      <span class="user-name">张三</span>
      <img class="avatar" src="@/assets/images/profile.png" alt="" srcset="" />
      <el-icon color="#fff" class="full-screen-btn" @click="toggle"
        ><FullScreen
      /></el-icon>
    </div>
    <div class="menu-list left" v-if="true">
      <div
        v-for="(item, index) in leftMenu"
        :key="index"
        class="item"
        :class="{ active: current.name == item.name }"
        @click="handlerClick(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="menu-list right" v-if="false">
      <div
        v-for="(item, index) in rightMenu"
        :key="index"
        class="item"
        :class="{ active: current.name == item.name }"
        @click="handlerClick(item)"
        type="file"
      >
        {{ item.name }}
      </div>
    </div>
    <MenuList @changeMode="emit('changeMode')" />
    <div class="search-box" v-if="false">
      <el-input
        v-model="timePoint"
        type="number"
        style="width: 100%"
        placeholder="请输入时间点"
        @keyup.enter="getDataByTime"
      >
      </el-input>
    </div>
  </div>
</template>

<script setup name="PHeader">
import { useFullscreen } from '@vueuse/core'
const { isFullscreen, enter, exit, toggle } = useFullscreen()
import { uploadFile } from '@/utils/upload-file.js'
import useAppStore from '@/store/modules/app'
import MenuList from '@/views/index/MenuList.vue'

const emit = defineEmits(['changeMode'])

const appStore = useAppStore()

const fileType = ref('file')
// 监听输入框输入事件
// const timePoint = computed({
//   get: () => appStore.timePoint,
//   set: val => {
//     appStore.setTimePoint(val)
//   }
// })
const timePoint = ref('')
const getDataByTime = () => {
  appStore.setTimePoint(timePoint.value)
}

const route = useRoute()
const router = useRouter()
import dayjs from 'dayjs'

const props = defineProps({
  title: {
    type: String,
    default: () => 'XX风力发电仿真平台'
  }
})

const date = ref(dayjs().format('YYYY-MM-DD'))
const time = ref(dayjs().format('HH:mm:ss'))
function run() {
  // console.log(new Date().getTime())
  time.value = dayjs().format('HH:mm:ss')
  date.value = dayjs().format('YYYY-MM-DD')
  requestAnimationFrame(run)
}
run()

onBeforeUnmount(() => {
  cancelAnimationFrame(run)
})

const list = ref([
  { name: '主页', path: '/index' },
  { name: '数据加载', path: '/index' },
  { name: '风电场', path: '/wind-farm' },
  { name: '送端换流站', path: '/dispatch' },
  { name: '受端换流站', path: '/receive' },
  { name: '负荷', path: '/burden' },
  { name: '参数' },
  { name: '加载' }
])

const leftMenu = computed(() => {
  let half = 2
  return list.value.slice(0, half)
})

const rightMenu = computed(() => {
  let half = leftMenu.value.length
  return list.value.slice(half)
})

const current = ref({
  name: '主页'
})

const handlerClick = item => {
  console.log(item, '----------------')
  // console.log(item)
  if (item?.path && item.name != '数据加载') {
    current.value = item
    router.push(item.path || '/index')
  }
  if (item.name == '数据加载') {
    uploadFile()
      .then(res => {
        console.log(res)
        // 上传成功，刷新页面
        appStore.refreshRouterView()
      })
      .catch(err => {
        console.log(err)
        // 上传失败
      })
  }
  if (item.name == '参数') {
    // 调用本地exe
    window.open('C:/Users/zheng/Desktop/风电场仿真平台/风电场仿真平台.exe')
  }
}

watchEffect(() => {
  // console.log('路由跳转',route.path)
  const item = list.value.find(item => item.path == route.path)

  if (item) {
    current.value = item
  }
})
</script>

<style lang="scss" scoped>
.p-header {
  width: 100%;
  height: 130px;
  // background-image: url('@/assets/images/park/d-header/header-bg@2x.png');
  background: url('@/assets/images/logo.png') no-repeat 0 0 / contain;
  // background-image: url('@/assets/images/logo.png');
  // background-size: contain;
  // background-repeat: no-repeat;
  // background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  :deep(.menu-list) {
    top: 54px;
    right: 15px;
  }
  :deep(.search-box) {
    top: 54px;
  }

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 34px;
    font-weight: bold;
    color: #eff6ff;
    background: linear-gradient(0deg, #55c5ff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: -4px;
  }

  .fixed-right {
    position: absolute;
    right: 35px;
    top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    .avatar {
      width: 30px;
      height: 30px;
    }

    .user-name {
      font-size: 14px;
      color: #eef5ff;
    }

    .clude {
      width: 18px;
      height: 18px;
    }

    .temp {
      font-size: 19px;
      font-family: Roboto;
      font-weight: bold;
      color: #eef5ff;
    }

    .time-box {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      font-family: Roboto;
      font-weight: bold;
      color: #eef5ff;

      .date {
        font-size: 12px;
      }
    }
  }

  .menu-list {
    position: absolute;
    bottom: -12px;
    display: flex;

    &.left {
      right: initial;
      left: 20px;

      .item {
        margin-left: -4px;
      }
    }

    &.right {
      left: initial;
      right: 20px;

      .item {
        margin-right: -4px;
      }
    }

    .item {
      width: 118px;
      height: 31px;
      background-image: url('@/assets/images/park/d-header/btn-bg@2x.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: bold;
      color: rgba(254, 254, 254, 0.6);
      cursor: pointer;
      transition: all 0.3s;

      &.active {
        color: rgba(254, 254, 254, 1);
        filter: brightness(200%);
      }

      &:hover {
        color: rgba(254, 254, 254, 1);
        filter: brightness(200%);
      }
    }
  }

  .search-box {
    position: absolute;
    bottom: -12px;
    right: 260px;
    width: 324px;
  }

  :deep(.el-input__wrapper) {
    background-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(44, 173, 255, 0.5);
  }

  :deep(.el-input__inner) {
    background-color: transparent;
    color: #fff;
  }

  :deep(.el-input-number__increase) {
    background-color: rgba(44, 173, 255, 0.5);
    color: #fff;
  }

  :deep(.el-input-number__decrease) {
    background-color: rgba(44, 173, 255, 0.5);
    color: #fff;
  }
}
.full-screen-btn {
  cursor: pointer;
}
</style>
